import {
  labelGOptions,
  operateType,
  tableActiveKey,
  drawerFormState,
  visible,
  modalFormState,
  totalTagCount,
  labelOptions,
  tmpLabelOptions,
  drawer_disable_ok_button,
  drawerInputValidators,
  defaultDataSource,
  defaultDrawerColumns,
} from "./store";
import { fetchLabelDataById, fetchLabelGDataById, handleSubmit } from "./utils";
import styles from "./index.module.less";
import { labelStatusMap, vipStatusMap } from "./dict";
import { tmp_proxy } from ".";
export const drawer_tablePage = renderTablePage();
export const drawerTitle = ref("");
export const drawerVisible = ref(false);
export const drawerLoading = ref(false);
export const drawerConfig = () => {
  const defineDrawer = {
    width: "800px",
    drawerInstance: ref(null),
    loading: drawerLoading,
    visible: drawerVisible,
    title: drawerTitle,
    maskClosable: true,
    disable_ok_button: drawer_disable_ok_button,
    formState: drawerFormState,
    slot: {
      extra_form_item: () => {
        return (
          <>
            {tableActiveKey.value === 0 ? (
              <>
                <a-row class="s-drawer-extra-row" gutter={16}>
                  <a-col span={24} offset={0} class="ml8">
                    <div
                      class={["mb16"]}
                      style="display: flex;align-items: center;column-gap: 5px;"
                    >
                      <div
                        class={[
                          styles.Tabs,
                          operateType.value === "update"
                            ? "cursor-not-allowed"
                            : "cursor-pointer",
                        ]}
                      >
                        <span
                          onClick={() => {
                            drawerFormState.type = 1;
                            fetchLabelDataById({
                              handleType: operateType.value,
                              type: drawerFormState.type,
                            });
                          }}
                          class={[
                            drawerFormState.type === 1
                              ? [styles.activeA, styles.brn]
                              : [styles.brn],
                            operateType.value === "update"
                              ? "pointer-events-none"
                              : "pointer-events-auto",
                          ]}
                        >
                          {$t("table93")}
                        </span>
                        <span
                          onClick={() => {
                            drawerFormState.type = 2;
                            fetchLabelDataById({
                              handleType: operateType.value,
                              type: drawerFormState.type,
                            });
                          }}
                          class={[
                            drawerFormState.type === 2 ? [styles.activeB] : "",
                            operateType.value === "update"
                              ? "pointer-events-none"
                              : "pointer-events-auto",
                          ]}
                        >
                          {$t("table94")}
                        </span>
                        <span
                          onClick={() => {
                            drawerFormState.type = 3;
                            fetchLabelDataById({
                              handleType: operateType.value,
                              type: drawerFormState.type,
                            });
                          }}
                          class={[
                            drawerFormState.type === 3
                              ? [styles.activeC, styles.bln]
                              : [styles.bln],
                            operateType.value === "update"
                              ? "pointer-events-none"
                              : "pointer-events-auto",
                          ]}
                        >
                          {$t("table119")}
                        </span>
                      </div>
                      <tips-cell
                        content={[
                          `1.${$t("label7")}`,
                          `2.${$t("label8")}`,
                          `3.${$t("label9")}`,
                        ]}
                      />
                    </div>
                  </a-col>
                </a-row>
                <s-title>{$t("base.baseInfo")}</s-title>
                <a-row class="s-drawer-extra-row" gutter={16}>
                  <a-col span={24}>
                    <a-form-item
                      label={$t("table38")}
                      name="tag_name"
                      rules={[
                        {
                          required: true,
                          trigger: ["change", "blur"],
                          validator: (rule: any, value: any) => {
                            if (!(value?.length >= 2 && value?.length <= 8)) {
                              drawerInputValidators[0] = true;
                              return Promise.reject(
                                "2-8" + $t("placeholder122")
                              );
                            }
                            drawerInputValidators[0] = false;
                            return Promise.resolve();
                          },
                        },
                      ]}
                    >
                      <a-input
                        maxlength={8}
                        vModel:value={drawerFormState.tag_name}
                        placeholder={$t("placeholder116")}
                      />
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row class="s-drawer-extra-row" gutter={16}>
                  <a-col span={24}>
                    <a-form-item
                      label={$t("table122")}
                      name="attr_id"
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 20 }}
                    >
                      <a-select
                        vModel:value={drawerFormState.attr_id}
                        placeholder={$t("placeholder117")}
                        allowClear
                        showSearch={true}
                        options={labelGOptions.value}
                        onSearch={(val: any) => {}}
                        onChange={(val: any) => {}}
                        filterOption={filterOption}
                        onkeyup={({ target }) => only_limit_charts(target)}
                      />
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row class="s-drawer-extra-row" gutter={16}>
                  <a-col span={12}>
                    <a-form-item
                      label={$t("table41")}
                      name="explain"
                      labelCol={{ span: 8 }}
                      wrapperCol={{ span: 16 }}
                    >
                      {withDirectiveInput({
                        vNode: (
                          <a-textarea
                            vModel:value={drawerFormState.explain}
                            placeholder={$t("placeholder118")}
                            rows={3}
                            maxlength={100}
                            showCount={true}
                          />
                        ),
                      })}
                    </a-form-item>
                  </a-col>
                </a-row>

                <s-title>{$t("base.seniorSet")}</s-title>
                <a-row class="s-drawer-extra-row" gutter={16}>
                  <a-col span="12">
                    <a-form-item
                      label={$t("table31")}
                      name="status"
                      rules={[
                        {
                          required: true,
                          trigger: ["change", "blur"],
                          message: $t("placeholder61"),
                        },
                      ]}
                    >
                      <s-radio-group
                        vModel={drawerFormState.status}
                        options={vipStatusMap}
                      ></s-radio-group>
                    </a-form-item>
                  </a-col>
                </a-row>
              </>
            ) : (
              <>
                <s-title>{$t("base.baseInfo")}</s-title>
                <a-row class="s-drawer-extra-row" gutter={16}>
                  <a-col span={24}>
                    <a-form-item
                      label={$t("table46")}
                      name="attr_name"
                      labelCol={{ span: 5 }}
                      wrapperCol={{ span: 19 }}
                      rules={[
                        {
                          required: true,
                          trigger: ["change", "blur"],
                          validator: (rule: any, value: any) => {
                            if (!(value?.length >= 2 && value?.length <= 10)) {
                              return Promise.reject(
                                "2-10" + $t("placeholder122")
                              );
                            }
                            return Promise.resolve();
                          },
                        },
                      ]}
                    >
                      <a-input
                        disabled={operateType.value === "view"}
                        maxlength={8}
                        vModel:value={drawerFormState.attr_name}
                        placeholder={$t("placeholder119")}
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row class="s-drawer-extra-row" gutter={16}>
                  <a-col span={24}>
                    <a-form-item
                      label={$t("table47")}
                      name="type"
                      labelCol={{ span: 5 }}
                      wrapperCol={{ span: 19 }}
                      rules={[
                        {
                          required: true,
                          trigger: ["change", "blur"],
                          message: $t("placeholder121"),
                        },
                      ]}
                    >
                      <div
                        class={["mb16"]}
                        style="display: flex;align-items: center;column-gap: 5px;"
                      >
                        <div
                          class={[
                            styles.Tabs,
                            operateType.value === "update" ||
                            operateType.value === "view"
                              ? "cursor-not-allowed"
                              : "cursor-pointer",
                          ]}
                        >
                          <span
                            onClick={() => {
                              drawerFormState.type = 1;
                              fetchLabelGDataById({
                                type: drawerFormState.type,
                              });
                            }}
                            class={[
                              drawerFormState.type === 1
                                ? [styles.activeA, styles.brn]
                                : [styles.brn],
                              operateType.value === "update" ||
                              operateType.value === "view"
                                ? "pointer-events-none"
                                : "pointer-events-auto",
                            ]}
                          >
                            {$t("table93")}
                          </span>
                          <span
                            onClick={() => {
                              drawerFormState.type = 2;
                              fetchLabelGDataById({
                                type: drawerFormState.type,
                              });
                            }}
                            class={[
                              drawerFormState.type === 2
                                ? [styles.activeB]
                                : [],
                              operateType.value === "update" ||
                              operateType.value === "view"
                                ? "pointer-events-none"
                                : "pointer-events-auto",
                            ]}
                          >
                            {$t("table94")}
                          </span>
                          <span
                            onClick={() => {
                              drawerFormState.type = 3;
                              fetchLabelGDataById({
                                type: drawerFormState.type,
                              });
                            }}
                            class={[
                              drawerFormState.type === 3
                                ? [styles.activeC, styles.bln]
                                : [styles.bln],
                              operateType.value === "update" ||
                              operateType.value === "view"
                                ? "pointer-events-none"
                                : "pointer-events-auto",
                            ]}
                          >
                            {$t("table119")}
                          </span>
                        </div>
                        <tips-cell
                          content={[
                            `1.${$t("label7")}`,
                            `2.${$t("label8")}`,
                            `3.${$t("label9")}`,
                          ]}
                        />
                      </div>
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row class="s-drawer-extra-row" gutter={16}>
                  <a-col span={24}>
                    <a-form-item
                      label={$t("table41")}
                      name="remark"
                      labelCol={{ span: 5 }}
                      wrapperCol={{ span: 19 }}
                    >
                      {withDirectiveInput({
                        vNode: (
                          <a-textarea
                            disabled={operateType.value === "view"}
                            vModel:value={drawerFormState.remark}
                            placeholder={$t("placeholder118")}
                            rows={3}
                            maxlength={100}
                            showCount={true}
                          />
                        ),
                      })}
                    </a-form-item>
                  </a-col>
                </a-row>

                <s-title>
                  <div class={styles.Flex}>
                    <span>
                      <i>{$t("table120")}</i>
                      <i class={styles.tips}>
                        {$t("table121")}: {totalTagCount.value}
                      </i>
                    </span>
                    {operateType.value !== "view" ? (
                      <s-button
                        vSlots={{
                          icon: renderIcon("icon-tianjia3"),
                        }}
                        type="primary"
                        onClick={() => {
                          modalFormState.attr_name = drawerFormState.attr_name;
                          labelOptions.value = tmpLabelOptions.value.filter(
                            (x: { value: any }) =>
                              !defaultDataSource[2].value.some(
                                (item: { tag_id: any }) =>
                                  x.value === item.tag_id
                              )
                          );
                          modalFormState.tag_id = [];
                          visible.value = true;
                        }}
                      >
                        {$t("base.addAssoLabel")}
                      </s-button>
                    ) : null}
                  </div>
                </s-title>
                <a-row class="s-drawer-extra-row" gutter={16}>
                  <a-col span={24}>
                    <s-table
                      pagination={drawer_tablePage}
                      bordered={true}
                      columns={defaultDrawerColumns[0]}
                      dataSource={defaultDataSource[1].value}
                      onChange={(paging: {
                        current: number;
                        pageSize: number;
                      }) => {
                        drawer_tablePage.current = paging.current;
                        drawer_tablePage.pageSize = paging.pageSize;
                        defaultDataSource[1].value =
                          defaultDataSource[2].value.slice(
                            (drawer_tablePage.current - 1) *
                              drawer_tablePage.pageSize,
                            drawer_tablePage.current * drawer_tablePage.pageSize
                          );
                      }}
                      tableSlot={{
                        bodyCell: ({
                          value,
                          text,
                          index,
                          column,
                          record,
                        }: any) => {
                          switch (column.key) {
                            case "index":
                              return (
                                <div class="s-table-body_cell">
                                  <i>
                                    {index +
                                      1 +
                                      (drawer_tablePage.current - 1) *
                                        drawer_tablePage.pageSize}
                                  </i>
                                </div>
                              );
                            case "status":
                              return (
                                <div class="s-table-body_cell">
                                  <i
                                    class={
                                      record.status === 0
                                        ? "s-52c41a"
                                        : "s-c1c1c1"
                                    }
                                  >
                                    {selectDictLabel(
                                      labelStatusMap,
                                      record.status == 0 ? 0 : 1
                                    )}
                                  </i>
                                </div>
                              );
                            case "action":
                              return (
                                <>
                                  <div class="s-table-body_cell">
                                    {operateType.value !== "view" ? (
                                      <s-button
                                        type="link"
                                        onClick={() => {
                                          const itemIndex =
                                            defaultDataSource[2].value.findIndex(
                                              ({ tag_id }: any) =>
                                                tag_id === record.tag_id
                                            );
                                          if (itemIndex >= 0) {
                                            defaultDataSource[1].value.splice(
                                              itemIndex,
                                              1
                                            );
                                            defaultDataSource[2].value.splice(
                                              itemIndex,
                                              1
                                            );
                                          }
                                          defaultDataSource[1].value =
                                            defaultDataSource[2].value.slice(
                                              (drawer_tablePage.current - 1) *
                                                drawer_tablePage.pageSize,
                                              drawer_tablePage.current *
                                                drawer_tablePage.pageSize
                                            );
                                          drawer_tablePage.total =
                                            defaultDataSource[2].value.length;

                                          totalTagCount.value =
                                            defaultDataSource[2].value.length;
                                        }}
                                      >
                                        {$t("base.delete")}
                                      </s-button>
                                    ) : null}
                                  </div>
                                </>
                              );
                            default:
                              return (
                                <div class="s-table-body_cell">{value}</div>
                              );
                          }
                        },
                      }}
                    />
                  </a-col>
                </a-row>
              </>
            )}
          </>
        );
      },
      extra: () => {
        const { loading } = defineDrawer;
        return (
          <>
            <a-space size={8}>
              {operateType.value != "view" ? (
                <s-button
                  icon={renderIcon("icon-cancel")}
                  onClick={() =>
                    tmp_proxy.$confirm({
                      closable: true,
                      maskClosable: true,
                      icon: null,
                      title: () => <>{$t("base.prompt")}</>,
                      style: {
                        top: "30%",
                      },
                      content: <>{$t("base.cancelTips")}</>,
                      onOk: () => (drawerVisible.value = false),
                    })
                  }
                >
                  {$t("base.cancel")}
                </s-button>
              ) : null}
              <s-button
                icon={renderIcon("icon-tubiao_tijiao")}
                loading={loading.value}
                disabled={
                  (drawer_disable_ok_button?.value ??
                    drawer_disable_ok_button) ||
                  drawerInputValidators.some((bool) => bool === true)
                }
                type="primary"
                onClick={async () => {
                  if (operateType.value === "view")
                    return (drawerVisible.value = false);
                  handleSubmit();
                }}
              >
                {operateType.value === "view" ? $t("base.ok") : $t("base.save")}
              </s-button>
            </a-space>
          </>
        );
      },
    },
  };
  return defineDrawer;
};
